<template>
    <div class="header">
        <div class="personal">
            <el-badge :is-dot="info > 0" class="item" @click="handleUsernameClick">
                <el-icon>
                    <Bell />
                </el-icon>
            </el-badge>
            <el-avatar :src="avatarSrc" class="ml mr" @click="handleUsernameClick"/>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    欢迎你，{{ nickname || username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item icon="User" command="user">个人中心</el-dropdown-item>
                        <el-dropdown-item icon="SwitchButton"  command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        
        <!-- 炫酷欢迎弹窗 -->
        <div v-if="showWelcomeDialog" class="welcome-overlay" @click="closeWelcomeDialog">
            <div class="welcome-dialog" @click.stop>
                <div class="welcome-content">
                    <div class="welcome-header">
                        <div class="welcome-icon">
                            <el-icon size="40">
                                <User />
                            </el-icon>
                        </div>
                        <div class="welcome-title">
                            <h2>{{ greeting }}，{{ nickname || username }}！</h2>
                            <p class="welcome-time">{{ currentTime }}</p>
                        </div>
                    </div>
                    <div class="welcome-body">
                        <div class="welcome-message">
                            <p>{{ currentMessage.message1 }}</p>
                            <p>{{ currentMessage.message2 }}</p>
                        </div>
                    </div>
                    <div class="welcome-footer">
                        <el-button type="primary" @click="closeWelcomeDialog" class="welcome-btn">
                            知道了
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue"
import { useUserStore } from "@/store/auth";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router"
import { User } from '@element-plus/icons-vue'
import { getGreeting, getTodayMessage } from '@/constants/welcome'
import avatarImg from '@/assets/avater.jpg';

const router = useRouter()
const userStore = useUserStore();
const { username, nickname } = storeToRefs(userStore) 
const info = ref(5)
const avatarSrc = ref(avatarImg);

// 欢迎弹窗相关
const showWelcomeDialog = ref(false)

// 当前时间
const currentTime = ref('')

// 更新时间函数
const updateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    currentTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}

// 定时器
let timeInterval: NodeJS.Timeout | null = null

// 当前文案
const currentMessage = computed(() => getTodayMessage())

// 问候语
const greeting = computed(() => getGreeting())

// 显示欢迎弹窗
const showWelcome = () => {
    showWelcomeDialog.value = true
    // 初始化时间并开始定时器
    updateTime()
    timeInterval = setInterval(updateTime, 1000)
}

// 关闭欢迎弹窗
const closeWelcomeDialog = () => {
    showWelcomeDialog.value = false
    // 清除定时器
    if (timeInterval) {
        clearInterval(timeInterval)
        timeInterval = null
    }
}

const handleCommand = (command: string) => {
    if (command == "user") {
        router.push("/personal")
    } else {
        userStore.logout()
        router.push("/login")
    }
}

// 监听用户名点击事件
const handleUsernameClick = () => {
    showWelcome()
}

// 组件卸载时清理定时器
onUnmounted(() => {
    if (timeInterval) {
        clearInterval(timeInterval)
        timeInterval = null
    }
})
</script>

<style lang="less" scoped>
.header{
    background-color: white;
    height: 60px;
    padding: 0 20px;
    .personal{
        float: right;
        display: flex;
        height: 60px;
        align-items: center;
        .item{
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            
            &:hover {
                transform: scale(1.1);
                color: #409eff;
            }
            
            &:active {
                transform: scale(0.95);
            }
        }
        
        .el-avatar {
            cursor: pointer;
            transition: all 0.3s ease;
            
            &:hover {
                transform: scale(1.1);
                box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
            }
            
            &:active {
                transform: scale(0.95);
            }
        }
    }
}

// 炫酷欢迎弹窗样式
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-out;
}

.welcome-dialog {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    animation: slideIn 0.4s ease-out forwards;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
        animation: shimmer 2s infinite;
    }
}

.welcome-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
}

.welcome-header {
    margin-bottom: 30px;
    
    .welcome-icon {
        margin-bottom: 20px;
        animation: bounce 1s ease-in-out;
        
        .el-icon {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            padding: 20px;
            backdrop-filter: blur(10px);
        }
    }
    
    .welcome-title {
        h2 {
            font-size: 28px;
            font-weight: 600;
            margin: 0 0 10px 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.6s ease-out 0.2s both;
        }
        
        .welcome-time {
            font-size: 16px;
            margin: 0;
            opacity: 0.9;
            font-weight: 300;
            animation: slideUp 0.6s ease-out 0.4s both;
        }
    }
}

.welcome-body {
    margin-bottom: 30px;
    
    .welcome-message {
        p {
            font-size: 18px;
            margin: 10px 0;
            line-height: 1.6;
            animation: slideUp 0.6s ease-out 0.6s both;
            
            &:last-child {
                animation-delay: 0.8s;
            }
        }
    }
}

.welcome-footer {
    .welcome-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        font-weight: 600;
        padding: 12px 30px;
        border-radius: 25px;
        font-size: 16px;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        animation: slideUp 0.6s ease-out 1s both;
        
        &:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        
        &:active {
            transform: translateY(0);
        }
    }
}

// 动画定义
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: scale(0.8) translateY(50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

// 响应式设计
@media (max-width: 768px) {
    .welcome-dialog {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .welcome-header .welcome-title h2 {
        font-size: 24px;
    }
    
    .welcome-body .welcome-message p {
        font-size: 16px;
    }
}
</style>